<script setup lang="ts">
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();
import ininstance from "@/http/index";
import { md5 } from "js-md5";
import { getList } from "../../login/services/phoneLogin";
import { showDialog } from "vant";
import { ssoUserinfo } from "@/views/login/services/sso";

import { computed, onMounted, ref, watch } from "vue";
import { getUser } from "@/http/Lzl";
// 封装组件
import Navbar from "./components/Navbar.vue";
import UserInfo from "./components/UserInfo.vue";
import Coupons from "./components/Coupons.vue";
import Myorders from "./components/Myorders.vue";
import Address from "./components/Address.vue";
import Activity from "./components/Activity.vue";
import Serve from "./components/Serve.vue";
// API方法
// Type类型
const userinfo = ref(JSON.parse(localStorage.getItem("user")));

// 方法
// 获取用户信息
const getuserinfo = async () => {
  let res = await getUser();
  // localStorage.setItem('userinfo', JSON.stringify(res.data[0]))
};

onMounted(() => {
  if (route.query.code || localStorage.getItem("refreshToken")) {
    getAuth();
  }
  getuserinfo();

  // const accessToken = localStorage.getItem("accessToken");
  // if (accessToken) {
  //   ssoUserinfo({ headers: { Authorization: `Bearer ${accessToken}` } }).then((response)=>{
  //     router.push("/home");
  //   }).catch((error)=>{
  //     localStorage.removeItem("refreshToken");
  //     router.push("/login");
  //   })
  // }else{
  //   router.push("/login");
  // }
});

//通过登录回调使用路由当中的内容来获取用户信息
let getAuth = async () => {
  ininstance.defaults.baseURL = "";
  let res = await ininstance.get("/api", {
    params: {
      act: "callback",
      appid: "3212",
      appkey: "b378e70fb7c65ebef7207cd8401f4bd4",
      type: route.query.type,
      code: route.query.code,
    },
  });
  console.log("获取第三方登录的用户信息", res.data);
  // createBrowserFingerprint();
};

//生成浏览器指纹
const createBrowserFingerprint = () => {
  //创建一个canvas元素
  const canvas = document.createElement("canvas");
  //获取canvas的上下文
  const ctx = canvas.getContext("2d");
  //填充颜色
  ctx!.fillStyle = "red";
  //填充一个1*1的矩形
  ctx!.fillRect(0, 0, 1, 1);
  //将canvas转换为base64编码的字符串，然后使用md5进行加密转换成哈希值
  console.log("浏览器指纹", md5(canvas.toDataURL()));
  return md5(canvas.toDataURL());
};
const ws = new WebSocket("ws://127.0.0.1:3002");
ws.addEventListener("open", () => {
  ws.send(
    JSON.stringify({
      action: "login", //动作登录

      fingerprint: createBrowserFingerprint(), //浏览器指纹
      _id: JSON.parse(localStorage.getItem("user")!)._id, //_id,唯一标识
    })
  );
});

ws.addEventListener("message", (message) => {
  const data = JSON.parse(message.data);
  console.log(data.action, "logout");
  if (data.action === "logout") {
    router.push("/login");
    localStorage.removeItem("refreshToken");
    localStorage.removeItem("accessToken");
    localStorage.removeItem("user");
    //监听到挤下线操作提示弹框
    showDialog({
      message: data.message,
    }).then(() => {
      // on close
    });
  }
});
</script>

<template>
  <div id="Me">
    <Navbar />
    <UserInfo :userInfo="userinfo" />
    <Coupons />
    <Myorders />
    <Address></Address>
    <Activity />
    <Serve />
    <div class="bottom">
      <div class="logo">
        <img src="/public/image/axlab-logo.png" alt="" />
        <div>
          <span
            style="
              color: #fff;
              border-top-left-radius: 1.1337rem;
              background-color: #d2d5da;
              padding: 0.2834rem 0.5669rem;
            "
            >{{ $t("Me.buy_vegetables") }}</span
          >
          <span
            style="
              color: #fff;
              border-bottom-right-radius: 1.1337rem;
              background-color: #dbdde1;
              padding: 0.2834rem 0.5669rem;
            "
            >{{ $t("Me.cheap") }}</span
          >
        </div>
      </div>
      <div class="tips">
        <span style="color: #c6cbd3">{{ $t("Me.platform_quotation") }}</span>
        <span style="color: #c6cbd3">{{ $t("Me.quality_assurance") }}</span>
        <span style="color: #c6cbd3">{{ $t("Me.rapid_refund") }}</span>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
#Me {
  height: 100vh;
  background-color: #f7f7f7;
  padding-bottom: 2.8343rem;
  overflow: scroll;

  .bottom {
    margin-top: 2.2674rem;
    display: flex;
    flex-direction: column;
  }

  .logo {
    display: flex;
    justify-content: center;
  }

  .tips {
    margin-top: 1.0669rem;
    margin-bottom: 1.0669rem;
    display: flex;
    justify-content: space-evenly;
  }
}
</style>
